<template>
  <table class="custom-table">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header.id" :style="{ width: header.width, }">{{
          header.text }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          <div class="cell" :title="cell">
            {{ cell }}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MTable',
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    },
  }
};
</script>

<style scoped>
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  font-size: 12px;
}

.cell {
  cursor: pointer;
}
</style>